<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业认证表单1</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #ffffff;
            color: #333333;
        }
        
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section-title {
            background-color: #e6f2ff;
            padding: 12px 16px;
            font-weight: 600;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
        }
        
        .form-input, .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            background-color: #f9fafb;
            transition: border-color 0.2s;
        }
        
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #ff7a45;
            box-shadow: 0 0 0 2px rgba(255, 122, 69, 0.1);
        }
        
        .required-mark {
            color: #ff4d4f;
            margin-left: 2px;
        }
        
        .primary-button {
            background-color: #ff7a45;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .primary-button:hover {
            background-color: #ff5a28;
        }
        
        .secondary-button {
            background-color: white;
            color: #333333;
            border: 1px solid #d1d5db;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .secondary-button:hover {
            border-color: #ff7a45;
            color: #ff7a45;
        }
        
        .link-text {
            color: #ff7a45;
            text-decoration: none;
        }
        
        .link-text:hover {
            text-decoration: underline;
        }
        
        .hint-text {
            color: #8c8c8c;
            font-size: 12px;
            margin-top: 4px;
        }
        
        .avatar-section {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 24px;
            color: #8c8c8c;
        }
        
        .auth-button {
            background-color: #ff4d4f;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .verification-code {
            display: flex;
            gap: 10px;
        }
        
        .verification-code .form-input {
            flex: 1;
        }
        
        .get-code-button {
            white-space: nowrap;
            min-width: 120px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 20px;
        }
        
        .form-checkbox {
            margin-top: 2px;
        }
        
        .buttons-container {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .form-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            background-color: #ffffff;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-container {
                padding: 15px;
            }
            
            .buttons-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .buttons-container button {
                width: 100%;
            }
            
            .verification-code {
                flex-direction: column;
            }
            
            .get-code-button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    
    <div class="form-container">
        <!-- 完善资料表单区域 -->
        <div class="form-section">
            <div class="avatar-section">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <button class="auth-button">
                    <i class="fas fa-id-card mr-1"></i>认证用户认证
                </button>
            </div>
            
            <div class="section-title">基本信息</div>
            
            <div class="form-group">
                <label class="form-label">企业全称<span class="required-mark">*</span></label>
                <input type="text" class="form-input"  placeholder="请输入企业全称">
            </div>
            
            <div class="form-group">
                <label class="form-label">企业类型<span class="required-mark">*</span></label>
                <select class="form-select">
                    <option value="trader" selected>贸易商</option>
                    <option value="manufacturer">制造商</option>
                    <option value="distributor">分销商</option>
                    <option value="retailer">零售商</option>
                    <option value="other">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">统一社会信用代码<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入统一社会信用代码">
            </div>
            
            <div class="form-group">
                <label class="form-label">通讯地址省市区<span class="required-mark">*</span></label>
                <select class="form-select">
                    <option value="" selected disabled>请选择省市区</option>
                    <!-- 这里可以根据实际需求添加更多选项 -->
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">详细地址<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入详细地址">
            </div>
            
            <div class="form-group">
                <label class="form-label">邮箱<span class="required-mark">*</span></label>
                <input type="email" class="form-input" placeholder="请输入收件邮箱">
            </div>
            
            <div class="form-group">
                <label class="form-label">业务推荐人</label>
                <input type="text" class="form-input" placeholder="请输入业务推荐人">
            </div>
        </div>
        
        <!-- 开票信息表单区域 -->
        <div class="form-section">
            <div class="section-title">开票信息 请核实开票信息，此开票信息将作为后续开票的依据</div>
            
            <div class="form-group">
                <label class="form-label">开票名称</label>
                <input type="text" class="form-input" value="王丽莹" placeholder="请输入开票名称">
            </div>
            
            <div class="form-group">
                <label class="form-label">统一社会信用代码</label>
                <input type="text" class="form-input" placeholder="请输入统一社会信用代码">
            </div>
            
            <div class="form-group">
                <label class="form-label">注册地址<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入注册地址">
            </div>
            
            <div class="form-group">
                <label class="form-label">开票单位联系电话<span class="required-mark">*</span></label>
                <input type="tel" class="form-input" placeholder="请输入开票单位联系电话">
            </div>
            
            <div class="form-group">
                <label class="form-label">开户行<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入开户行">
            </div>
            
            <div class="form-group">
                <label class="form-label">开票账号<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入银行账号">
            </div>
            
            <div class="section-title">法人信息</div>
            
            <div class="form-group">
                <label class="form-label">证件类型<span class="required-mark">*</span></label>
                <select class="form-select">
                    <option value="id" selected>中国大陆身份证</option>
                    <option value="passport">护照</option>
                    <option value="other">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label class="form-label">法定代表人姓名<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入法定代表人姓名">
            </div>
            
            <div class="form-group">
                <label class="form-label">证件号码<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入证件号码">
            </div>
        </div>
        
        <!-- 管理员信息表单区域 -->
        <div class="form-section">
            <div class="section-title">管理员信息 管理员拥有管理后台的全部管理权限，包括员工管理、角色权限配置、修改企业信息等功能</div>
            
            <div class="form-group">
                <label class="form-label">管理员姓名<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入与当前登录手机号实名一致的姓名">
            </div>
            
            <div class="form-group">
                <label class="form-label">管理员身份证号码<span class="required-mark">*</span></label>
                <input type="text" class="form-input" placeholder="请输入与当前登录手机号实名一致的身份证号码">
            </div>
            
            <div class="form-group">
                <label class="form-label">管理员手机号<span class="required-mark">*</span></label>
                <input type="tel" class="form-input" value="13503631553" placeholder="请输入管理员手机号">
                <p class="hint-text">当前登录的手机号需与管理员实名信息一致，若手机号非本人实名注册，则不可认证，您可在<a href="#" class="link-text">账号安全</a>中更换手机号</p>
            </div>
            
            <div class="form-group">
                <label class="form-label">验证码<span class="required-mark">*</span></label>
                <div class="verification-code">
                    <input type="text" class="form-input" placeholder="请输入验证码">
                    <button type="button" class="primary-button get-code-button">获取验证码</button>
                </div>
                <p class="hint-text">1天最多获取10次短信验证码，超过请明日再来，今天剩余10次</p>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="agreement" class="form-checkbox">
                <label for="agreement">
                    提交即代表您同意<a href="#" class="link-text">《用户服务协议》</a>、<a href="#" class="link-text">《实名认证服务协议》</a>、<a href="#" class="link-text">《承诺函》</a>和<a href="#" class="link-text">《隐私政策》</a>
                </label>
            </div>
            
            <div class="buttons-container">
                <button type="button" class="secondary-button">上一步</button>
                <button type="button" class="primary-button">下一步</button>
            </div>
        </div>
    </div>
    
    <script>
        // 获取验证码按钮点击事件
        document.querySelector('.get-code-button').addEventListener('click', function() {
            const button = this;
            let countdown = 60;
            
            // 禁用按钮并开始倒计时
            button.disabled = true;
            button.classList.add('bg-gray-400');
            button.classList.remove('bg-orange-500');
            
            const timer = setInterval(() => {
                countdown--;
                button.textContent = `${countdown}秒后重新获取`;
                
                if (countdown <= 0) {
                    clearInterval(timer);
                    button.disabled = false;
                    button.textContent = '获取验证码';
                    button.classList.remove('bg-gray-400');
                    button.classList.add('bg-orange-500');
                }
            }, 1000);
        });
        
        // 上一步和下一步按钮点击事件
        document.querySelectorAll('.buttons-container button').forEach(button => {
            button.addEventListener('click', function() {
                // 这里可以添加表单验证和页面切换逻辑
                if (this.textContent === '下一步') {
                    // 检查是否同意协议
                    const agreementCheckbox = document.getElementById('agreement');
                    if (!agreementCheckbox.checked) {
                        alert('请阅读并同意相关协议');
                        return;
                    }
                    
                    // 这里可以添加表单提交逻辑
                    alert('表单提交成功');
                } else {
                    // 上一步按钮逻辑
                    alert('返回上一步');
                }
            });
        });
    </script>
</body>
</html>